<template>
  <div class="wrap">                                                                               <!--listview展示-->
    <gj-loadmore :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore" class="loadmore">
      <div class="box" v-for="(item,index) in datalist" :key="index">
        <div class="left">
          <div class="left-up">
            <div class="left-up-left"><span class="left-up-left-first" :class="{'rg':item.entrust_bs==2,'sg':item.entrust_bs==3,'sh':item.entrust_bs==4}">{{item.status}}</span><span class="left-up-left-mid">{{item.ofname}}</span><span class="left-up-left-last">{{item.ofcode}}</span></div>
            <div class="left-up-right"><img :src ="imgUrl(item)" alt=""></div>
          </div>
          <div class="left-down">
            <div class="left-down-left"><span class="fir">{{item.entrust_vol}}</span><span class="sec">委托份额</span></div>
            <div class="left-down-middle"><span class="fir">{{item.entrust_amt}}</span><span class="sec">委托金额</span></div>
            <div class="left-down-right"><span class="fir">{{item.DT}}</span><span class="sec">委托日期</span></div>
          </div>
        </div>
        <div class="right" @click="cancle(item, index)" v-show="item.cancel_flag == 1">撤单</div>                      <!--1 代表可以撤单-->
        <div class="rightcopy" v-show="item.cancel_flag != 1"></div>
      </div>
    </gj-loadmore>
  </div>
</template>
<script>
  import LocalDAO from 'common/localDAO'
  import LoadMore from 'components/LoadMore'
  import RemoteDAO from 'common/remoteDAO'
  import Constant from 'common/constant'
  import CommonUtil from 'common/common.util'
  export default {
    data () {
      return {
        start: 0,
        limit: 20,
        message: '',                                //  调试用的打印信息
        client_id:'',                              //    相当于userCode
        datalist: [],
        error:''                                   //  先定义好一个错误对象
      }
    },
    components: {
      'gj-loadmore':LoadMore
    },
    created () {
      this.client_id = LocalDAO.getUserCode() ? LocalDAO.getUserCode() : '';                       // get userCode
    },
    methods:{
      loadBottom () {                        //   页面进来首先会执行的方法，直到把页面填满。同时也是上拉加载更多的调用方法
        let vm = this;
        this.fetchData(afterBottomLoad,false)   //  传递false作为‘标志位’告诉fetch方法是上拉加载在调用请求
        function afterBottomLoad (allLoaded,error) {         //  上拉加载的回调
          if(error) {
            vm.$refs.loadmore.onBottomError(error); //单次加载失败或无数据
          } else if(allLoaded){
            vm.$refs.loadmore.onBottomAllLoaded(); //全部数据加载完成
          } else {
            vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
          }
        }
      },
      loadTop() {                                                //   下拉刷新方法
        let vm = this;
        this.fetchData(afterTopLoad,true)                  //  传递TRUE作为'标志位'告诉fetch是下拉刷新在调用接口
        function afterTopLoad(allLoaded,error) {           //  下拉刷新的回调
          vm.$refs.loadmore.onTopLoaded();               //   一定执行
          if(allLoaded && !error){
            vm.$refs.loadmore.onBottomAllLoaded(); //全部数据加载完成
          }else if(!error){
            vm.$refs.loadmore.reset();            //  单次加载成功
          }else{
            vm.$refs.loadmore.onBottomError(); //单次加载失败
          }
        }
      },
      fetchData (callBack,refresh) {
        if(refresh){                    //  对refresh标志位的判断，决定是否要将start置零
          this.start = 0;
        }
        var params = {                   //  参数对象
          client_id: this.client_id,
          entrust_type: 1,
          entrust_typeid: '',
          start: this.start,
          limit: this.limit
        };
        RemoteDAO.callJCL11163(params,data=>{                                //  今日委托的接口11163
          var allLoaded = false;                                            //  定义一个是否全部加载的boolean值，默认是FALSE代表未全部加载完
          if(data.error == "0"){                                           //   数据请求成功
            var list = data.data.body.records;                             //  取得records
            if(list.length != 0){                                         //  判空处理  如果数据不是空
              var templist = this.formatData(list);                       //  格式化数据
              if(refresh){                                               //  格式化完成，判断是要替换原数据还是做concat处理
                  this.datalist = templist;                             //  如果是下拉刷新请求到的数据，清空原来的数组，放入新的数据
              }else{
                this.datalist = this.datalist.concat(templist);         //   如果是上拉加载请求来的数据做concat
              }                                                       //  至此 数据已经回填结束了
              allLoaded=templist.length<this.limit;                       // 更新allloaded
              if(!allLoaded) {
                this.start+=this.limit;                                   //  如果没有完全加载完成可以继续上拉，start增加
              }
              this.error = '';                                            // 此种情况（接口请求成功且数据不为空） 错误对象是空
            }else{                                                         //  如果请求成功但是数组是空
                if(this.start == 0){                                             //  判断是不是第一次请求
                  this.error = '暂无数据'                                        //  如果是第一次请求接口就没请求到error=‘暂无数据’
                }else{
                  allLoaded = true;                                           //  如果不是第一次请求，那就是allloaded
                }
            }
          }else{                                         //  数据请求失败
            this.error = data.data;                      //  错误信息   此时allloaded  仍然是FALSE
          }
          callBack(allLoaded,this.error);
        })
      },
      //   以下均为工具方法
      formatData (list) {                                            //   格式化返回的数据
        for(let i=0;i<list.length;i++){                              // 数据格式化entrust_bs字段
          let tempObj = list[i];
          tempObj.status = ''
          switch (tempObj.entrust_bs){
            case 2:
              tempObj.status = '认购'
              break;
            case 3:
              tempObj.status = '申购'
              break;
            case 4:
              tempObj.status = '赎回'
              break;                                                         //   此处去掉了  合并  和  分拆
          }
            tempObj.entrust_vol = CommonUtil.toFixed(tempObj.entrust_vol,2)
            tempObj.entrust_amt = CommonUtil.toFixed(tempObj.entrust_amt,2)
            tempObj.DT = CommonUtil.formatDateSlash(tempObj.entrust_date)+" "+CommonUtil.formatHourMinute(tempObj.entrust_time);
        }
        return list;
      },
      imgUrl(item){                                                                //  处理图片方法
        var url = '';
        if(item.entrust_status == '0'){                                           //    已回
          url = require('../../assets/images/yihui.png')
        }else if(item.entrust_status == '1'){                                     //    已撤
          url = require('../../assets/images/yichedan.png')
        }else if(item.entrust_status == '2'){                                   //   全部成交
          url = require('../../assets/images/yicheng.png')
        }else if(item.entrust_status == '3'){                                   //   部分成交
          url = require('../../assets/images/order-status3.png')
        }else if(item.entrust_status == '4'){                                   //      部撤
          url = require('../../assets/images/order-status4.png')
        }else if(item.entrust_status == '5'){                                 //  废单
          url = require('../../assets/images/feidan.png')
        }
        return url;
      },
      cancle (item,index) {                                                                // 撤单
        var params = {
          ofcode: item.ofcode,
          entrust_no: item.entrust_no,
          client_id: this.client_id
        }
        RemoteDAO.callJCL11164(params,data=>{                                             //撤单接口
          if(data.error == '0'){
            var body = data.data.body || {};
            if(body.status == 0){
              item.entrust_status = 1;
              item.cancel_flag = 0;
              this.$store.dispatch('setTip',{text:"撤单成功"});
            }else{
              this.$store.dispatch('setTip',{text:body.describe !=""?body.describe:"撤单失败"});
            }
          }else{
            this.$store.dispatch('setTip',{text:"撤单失败"});
          }
        })
      },
      back(){
        if(this.btn ==  Constant.leftBtn.CLOSE || typeof (this.$route.query.cleanStorage)!== 'undefined'){
          window.location.href = 'gtjanormal://goback'
        }else{
          this.$router.go(-1)
        }
      }
    }
  }
</script>

<style scoped>
  *{
    box-sizing: border-box;
  }
  .loadmore{
    width: 100%;
  }
  .rightcopy{
    box-sizing: border-box;
    width: 43px;
    height: 43px;
    line-height: 43px;
    /*background-color: #5d5d5d;*/
    color: white;
    font-size: 12px;
    border-radius: 5px;
    text-align: center;
  }
  .anon{
    margin-right: -12px;
    margin-left: -12px;
    margin-top: 18px;
  }
  .date{
    display: block;
    font-size: 12px;
    color: #989898;
  }
  .wrap{
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*overflow-y: auto;*/
  }
  .game-date-wrap{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 76px;
    width: 100%;
    background-color: white;
    border-bottom: 10px solid #f2f3f7;
    padding-bottom: 7px;
  }
  .game-date-wrap-left{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .game-date-wrap-right{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .left-down-left{
    align-self: stretch;
  }
  .game-date_start-date-wrap{
    color: #565656;
    border: solid 1px #D8D8D8;
    /* padding: 4px; */
    border-radius: 3px;
    display: inline-block;
    width: 123px;
    height: 31px;
  }
  .game-date_start-date_value{
    height: 31px;
    line-height: 31px;
  }
  .game-date_end-date_value{
    height: 31px;
    line-height: 31px;
  }
  .game-date_start-date-wrap i{
    color: white;
    font-size: 14px;
    border-radius: 2px;
    background-color: rgba(95, 170, 232, 1);
    float: right;
    padding: 0 8px;
    height: 30px;
    line-height: 30px;
  }
  .game-date_end-date-wrap{
    color: #565656;
    border: solid 1px #D8D8D8;
    /* padding: 4px; */
    border-radius: 3px;
    display: inline-block;
    width: 123px;
    height: 31px;
  }
  .game-date_end-date-wrap i{
    color: white;
    font-size: 14px;
    border-radius: 2px;
    background-color: rgba(95, 170, 232, 1);
    float: right;
    padding: 0 8px;
    height: 30px;
    line-height: 30px;
  }
  .search{
    margin-top: 20px;
    width: 61px;
    height: 29px;
    background-color: #1bafeb;
    color: white;
    border-radius: 5px;
    line-height: 29px;
    text-align: center;
  }
  .box{
    display: flex;
    display: -webkit-flex;
    width: 100%;
    min-height: 95.5px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 0;
  }
  .left{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    align-self: center;
  }
  .left-up{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /*margin-top: 5px;*/
  }
  .left-down{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    /*margin-bottom: 5px;*/
  }
  .left-down span{
    display: block;
    padding-left: 4px;
    padding-right: 9px;
  }
  .left-up-left{
    display: inline;
    width: 85%;
    /*align-self: flex-start;*/
  }
  .left-up-right{
    display: inline;
    margin-left: 5px;
  }
  .rg{
    width: 30px;
    height: 18px;
    background-color: #ff9f52;
    font-size: 12px;
    color: white;
    border-radius: 3px;
  }
  .sg{
    width: 30px;
    height: 18px;
    background-color: #f66e7b;
    font-size: 12px;
    color: white;
    border-radius: 3px;
  }
  .sh{
    width: 30px;
    height: 18px;
    background-color: #a460c8;
    font-size: 12px;
    color: white;
    border-radius: 3px;
  }
  .left-up-left-mid{
    padding-left: 3px;
    font-size: 16px;
  }
  .left-up-left-last{
    font-size: 10px;
    color: #979797;
    padding-left: 5px;
  }
  .right{
    box-sizing: border-box;
    width: 43px;
    height: 43px;
    line-height: 43px;
    background-color: #5d5d5d;
    color: white;
    font-size: 12px;
    border-radius: 5px;
    text-align: center;
  }
  .header-trade-title{
    width: 180px;
    height: 30px;
    line-height: 30px;
    margin: 7px auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: RGBA(48,71,187,0.6);
    border-radius: 15px;
    border: 1px solid #6D92D7;
  }
  .title{
    height: 30px;
    line-height: 28px;
    width: 89px;
    text-align: center;
    float: left;
    font-size: 14px;
    color: #FFFFFF;
  }
  .left-down-left .fir{
    font-size: 14px!important;
  }
  .left-down-middle .fir{
    font-size: 14px!important;
  }
  .left-down-right .fir{
    font-size: 14px!important;
  }
  .left-down-left .sec{
    font-size: 12px !important;
    color: #999999 !important;
  }
  .left-down-middle .sec{
    font-size: 12px !important;
    color: #999999 !important;
  }
  .left-down-right .sec{
    font-size: 12px !important;
    color: #999999 !important;
  }
  .title.active{
    border-radius: 20px;
    color: #2E55C6;
    background: #FFFFFF;
  }
  .judge .left-down-middle{
    width: 29%;
    margin-right: 5px;
    margin-left: 5px;
  }
  .judge .left-down-right{
    width: 24%;
    margin-left: -25px;
    margin-right: 36px;
  }
  @media screen and (max-width: 320px) {
    .rightcopy{
      box-sizing: border-box;
      width: 35px;
      height: 35px;
      line-height: 35px;
      /*background-color: #5d5d5d;*/
      color: white;
      font-size: 12px;
      border-radius: 5px;
      text-align: center;
    }
    .left-up-left-mid {
      font-size: 13px;
    }
    .left-up-right img{
      width: 41.5px !important;
      height: 29.8px !important;
      padding-top: 3px !important;
    }
    .game-date_start-date-wrap{
      height: 26.35px !important;
      width: 102.85px !important;
      line-height: 26.35px !important;
    }
    .game-date_start-date-wrap i{
      font-size: 10px;
      height: 25px;
      line-height: 25px;
    }
    .game-date_end-date-wrap i{
      font-size: 10px;
      height: 25px;
      line-height: 25px;
    }
    .game-date_end-date-wrap{
      height: 26.35px !important;
      line-height: 26.35px !important;
      width: 102.85px !important;
    }
    .game-date_start-date_value{
      line-height: 26.35px;
    }
    .game-date_end-date_value{
      line-height: 26.35px;
    }
    .search{
      width: 51.85px;
      height: 24.65px;
      line-height: 24.65px;
    }
    .right{
      width: 35px;
      height: 35px;
      line-height: 35px;
      background-color: #5d5d5d;
      color: white;
      font-size: 10px;
      border-radius: 5px;
      text-align: center;
    }
  }
  @media screen and (max-width: 375px) {
    .left-up-right img{
      width: 57.6px;
      height: 41.4px;
    }
  }
</style>
